<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="attention h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="关注订阅" left-icon="left" @clickLeft="back" />
      <uni-nav-bar :height="globalData.navBarInfo.height" title="关注订阅" color="#FFFFFF" backgroundColor="#FF7C00">
        <block slot="left">
          <uni-icons color="white" class="icon-left" @click="back" type="left" size="23"></uni-icons>
          <uni-icons color="white" @click="switchTabPage(`/pages/procurementPage`, 1)" type="home" size="23"></uni-icons>
        </block>
      </uni-nav-bar>
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view class="noticeBox">
          <view class="notice flb">
            <view class="flc">
              <view class="flr noticeTitle">
                <image class="noticeImg1 w24 h24 mr6" src="@/static/img/my/notice1.png"></image>
                <view class="h24 l24 cGR2 bold f16">订阅通知</view>
              </view>
              <view class="h32 l32 cGR2 f14">每日06:00自动开启通知，22:00结束</view>
            </view> 
            <view class="btnBox flca h100p">
              <view v-if="isLoad" :class="[attentionInfo.isSubscribe === '1' ? 'on' : 'off']" @click="toggleClick">{{ attentionInfo.isSubscribe === '1' ? '已开启' : '已关闭' }}</view>
            </view>
          </view>
        </view>
        <view class="subscribeMain">
          <view class="">
            <text class="f14 cGY3 bold">请输入您想关注的关键字</text>
            <text class="f12 cGY3">(限3个且不超过5个汉字)</text>
          </view>
          <view class="box1">
            <view class="flr mt10 inputBox">
              <input trim="all" maxlength="5" type="text" borderColor="#f0f0f0" class="input" v-model="keyWords1" placeholder="限五个汉字" />
              <view class="label tc" @click="attentionClick">关注 </view>
            </view>
            <view class="flr mt8" v-if="attentionInfo.subscribeKeywordList.length > 0">
              <view class="f12 h24 l24 cGY3 mr8">已关注:</view>
              <view class="btn1 f12 mr16" v-for="(item, idx) in attentionInfo.subscribeKeywordList" :key="idx" @click="clearClick(item)">
                <uni-icons type="clear" class="close" color="#a8a8a8" size="16" />
                <text>{{ item }}</text>
              </view>
            </view>
          </view>
          <view class="f14 cGY3 bold mt10">请输入您相关注的分类 </view>
          <view class="box2 flc">
            <view class="flr mt10 inputBox">
              <uni-combox :border="false" v-model="keyWords2" :candidates="categoryList" class="input" placeholder="如：芯片" />
              <view class="label tc" @click="categoryClick">关注 </view>
            </view>
            <view class="mt8">
              <text class="mr16 f14 bold">订阅分类</text>
              <text class="cYE f14">{{ attentionInfo.subscribeCategoryList.length }}</text>
              <text class="cGY3 f14">/5</text>
            </view>
            <view class="flc mt4" v-if="attentionInfo.subscribeCategoryList.length > 0">
              <view class="flb mt6" v-for="(item, idx) in attentionInfo.subscribeCategoryList" :key="idx">
                <view class="flr">
                  <image class="w24 h24 mr6" src="@/static/img/my/notice2.png"></image>
                  <view class="h24 l24 cGR2 bold f16">{{ item }}</view>
                </view>
                <view class="h24">
                  <!-- <uni-icons type="right" size="24" class="mr16" /> -->
                  <uni-icons type="trash" size="24" @click="trashClick(item)" />
                </view>
              </view>
            </view>
          </view>
          <view class="recommend mt10 w100p">
            <view class="flr list">
              <image class="w22 h24 mr6" src="@/static/img/my/people.png"></image>
              <view class="h24 l24 cGR2 f16">根据您的近期行文，为您推荐以下分类</view>
            </view>
            <view class="mt10 addBox w100p">
              <view class="flcv addItem flb" :class="[idx === recommendList.length ? 'bd' : '']" v-for="item in recommendList" :key="item.categoryName">
                <view class="h24 l24 cGR2 bold f16">{{ item.categoryName }}</view>
                <view class="add" @click="addClick(item)"> 添加 </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      attentionInfo: {
        isSubscribe: '1',
        subscribeKeyword: '',
        subscribeKeywordList: [],
        subscribeCategory: '',
        subscribeCategoryList: []
      },
      showFixedBottom: true,
      isLoad: false,
      recommendList: [],
      recommendListOrg: [],
      keyWords1: '',
      keyWords2: '',
      categoryList: []
    };
  },
  components: { FixedBottomBtn },
  onLoad() {
    this.queryUserInfo();
    this.queryRecommend();
    this.getAllCategory();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryUserInfo() {
      let res = await api.request({ url: '/appUser/queryUserInfo', data: {}, method: 'GET' });
      this.isLoad = true;
      this.attentionInfo = {
        ...res.data,
        subscribeKeywordList: res.data.subscribeKeyword ? res.data.subscribeKeyword.split(',') : [],
        subscribeCategoryList: res.data.subscribeCategory ? res.data.subscribeCategory.split(',') : []
      };
    },
    async queryRecommend() {
      let res = await api.request({ url: '/appUser/queryRecommend', data: {}, method: 'GET' });
      this.recommendList = res.data;
      this.recommendListOrg = JSON.parse(JSON.stringify(res.data));
    },
    async getAllCategory() {
      let res = await api.request({ url: '/category/queryAll', data: {}, method: 'GET' });
      res.data.forEach(el => this.categoryList.push(el.categoryName));
    },
    toggleClick() {
      this.attentionInfo.isSubscribe = this.attentionInfo.isSubscribe === '1' ? '2' : '1';
    },
    attentionClick() {
      if (this.attentionInfo.subscribeKeywordList.length < 3) {
        let list = this.attentionInfo.subscribeKeywordList.filter(el => el === this.keyWords1);
        if (list.length === 0) {
          this.attentionInfo.subscribeKeywordList.push(this.keyWords1.trim());
          this.attentionInfo.subscribeKeyword = this.attentionInfo.subscribeKeywordList.join(',');
          this.keyWords1 = '';
        } else {
          uni.showToast({ title: '已关注', icon: 'none', duration: 2000 });
        }
      } else {
        uni.showToast({ title: '最多关注3个关键字', icon: 'none', duration: 2000 });
      }
    },
    clearClick(item) {
      this.attentionInfo.subscribeKeywordList = this.attentionInfo.subscribeKeywordList.filter(el => el !== item);
      this.attentionInfo.subscribeKeyword = this.attentionInfo.subscribeKeywordList.join(',');
    },
    categoryClick() {
      if (this.attentionInfo.subscribeCategoryList.length < 5) {
        this.attentionInfo.subscribeCategoryList.push(this.keyWords2);
        this.attentionInfo.subscribeCategory = this.attentionInfo.subscribeCategoryList.join(',');
        this.keyWords2 = '';
      } else {
        uni.showToast({ title: '最多关注5个分类', icon: 'none', duration: 2000 });
      }
    },
    trashClick(item) {
      this.attentionInfo.subscribeCategoryList = this.attentionInfo.subscribeCategoryList.filter(el => el !== item);
      this.attentionInfo.subscribeCategory = this.attentionInfo.subscribeCategoryList.join(',');
      let category = this.recommendListOrg.filter(el => el.categoryName === item);
      let category1 = this.recommendList.filter(el => el.categoryName === item);
      if (category.length > 0 && category1.length === 0) {
        this.recommendList = [...this.recommendList, ...category];
      }
    },
    addClick(item) {
      if (this.attentionInfo.subscribeCategoryList.filter(el => el === item.categoryName).length > 0) {
        this.recommendList = this.recommendList.filter(el => el.categoryName !== item.categoryName);
      } else if (this.attentionInfo.subscribeCategoryList.length < 6) {
        this.attentionInfo.subscribeCategoryList.push(item.categoryName);
        this.attentionInfo.subscribeCategory = this.attentionInfo.subscribeCategoryList.join(',');
        this.keyWords2 = '';
        this.recommendList = this.recommendList.filter(el => el.categoryName !== item.categoryName);
      } else {
        uni.showToast({ title: '最多关注5个分类', icon: 'none', duration: 2000 });
      }
    },
    async submit() {
      let resp = await api.request({ url: '/appUser/updateAppUser', data: this.attentionInfo });
      if (resp.code === 200) {
        uni.showToast({ title: '提交成功', icon: 'success', duration: 1500 });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.attention /deep/ {
  .uni-combox {
    padding: 0 !important;
    height: 46rem;
    line-height: 46rem;
    .uni-icons {
      display: none !important;
    }
  }
}
.attention {
  .noticeBox {
    padding: 12rem;
    box-sizing: border-box;
    .notice {
      height: 76rem;
      padding: 6rem 12rem;
      box-sizing: border-box;
      border-radius: 10rem;
      background: #fcead7;
      .noticeTitle {
        padding-top: 4rem;
        box-sizing: border-box;
      }
      .btnBox {
        width: 80rem;
        .on {
          background: #ff7c00;
          padding: 4rem 10rem;
          box-sizing: border-box;
          line-height: 20rem;
          height: 28rem;
          text-align: center;
          color: #fff;
          border-radius: 5rem;
        }
        .off {
          background: #a6a6a6;
          padding: 4rem 10rem;
          box-sizing: border-box;
          line-height: 20rem;
          height: 28rem;
          text-align: center;
          color: #fff;
          border-radius: 5rem;
        }
      }
    }
  }
  .subscribeMain {
    height: calc(100% - 100rem);
    padding: 20rem 12rem 12rem 12rem;
    box-sizing: border-box;
    border-top: 1rem solid #ff7c00;
    border-radius: 20rem 20rem 0 0;
    .box1 {
      border-bottom: 0.5rem solid rgba(166, 166, 166, 0.5);
      padding-bottom: 10rem;
      box-sizing: border-box;
      .inputBox {
        height: 46rem;
        .input {
          line-height: 46rem;
          height: 46rem;
          padding-left: 20rem;
          width: calc(100% - 80rem);
          background: #f0f0f0;
          border-radius: 50rem 0 0 50rem;
        }
        .label {
          line-height: 46rem;
          height: 46rem;
          width: 80rem;
          background: #ff7c00;
          color: #fff;
          border-radius: 0 50rem 50rem 0;
        }
      }
      .btn1 {
        position: relative;
        box-sizing: border-box;
        padding: 0 10rem;
        line-height: 24rem;
        height: 24rem;
        color: #808080;
        text-align: center;
        border-radius: 5rem;
        border: 1px solid #a6a6a6;
        .close {
          position: absolute;
          top: -11rem;
          right: -7rem;
        }
      }
    }
    .box2 {
      border-bottom: 0.5rem solid rgba(166, 166, 166, 0.5);
      padding-bottom: 10rem;
      box-sizing: border-box;
      .inputBox {
        height: 46rem;
        .input {
          line-height: 46rem;
          height: 46rem;
          padding-left: 20rem;
          width: calc(100% - 80rem);
          background: #f0f0f0;
          border-radius: 50rem 0 0 50rem;
        }
        .label {
          line-height: 46rem;
          height: 46rem;
          width: 80rem;
          background: #ff7c00;
          color: #fff;
          border-radius: 0 50rem 50rem 0;
        }
      }
    }
    .recommend {
      padding: 12rem;
      box-sizing: border-box;
      border-radius: 10px;
      background: rgba(255, 251, 247, 1);
      .addBox {
        .addItem {
          height: 50rem;
          line-height: 50rem;
          .add {
            background: #ff7c00;
            padding: 4rem 10rem;
            box-sizing: border-box;
            line-height: 20rem;
            height: 28rem;
            color: #fff;
            text-align: center;
            border-radius: 5rem;
            background: #a6a6a6;
            border: 0.5px solid #a6a6a6;
          }
        }
        .bd {
          border-bottom: 0.5rem solid rgba(166, 166, 166, 0.5);
        }
      }
    }
  }
}
</style>
